import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Link, withRouter } from 'react-router-dom';
import Cookies from 'js-cookie';

import styles from './style.scss';
import Input from '@components/Input';
import Button from '@components/Button';
import Message from '@components/Message';
import { getValueFromEvent } from '@utils/common';
import Checkbox from '@components/Checkbox';
import { Form, Modal } from 'antd';
const FormItem = Form.Item;

@withRouter
@inject('globalStore', 'signinStore')
@observer
export default class Signin extends Component {
    constructor(props) {
        super(props);

        document.title = '用户登录';
        this.store = props.signinStore;

        // const userId = Cookies.get('client__user_id');
        // if (userId) {
        //     props.history.replace('/');
        // }
    }
    componentWillMount() {
        // this.store.refreshCaptcha();
    }

    componentWillUnmount() {
        this.store.reset();
    }

    onUsernameChange = evt => {
        this.store.setVal('username', getValueFromEvent(evt).trim());
    };
    onPasswordChange = evt => {
        this.store.setVal('password', getValueFromEvent(evt).trim());
    };
    onCheckboxChange = evt => {
        this.store.setVal('isAgreeAgreement', evt.target.checked);
    };
    onSubmit = evt => {
        this.props.history.push('/home');
        // setTimeout(async () => {
        //     await this.store.login();
        //     if (this.store.isLogon) {
        //         Message.success('登录成功');
        //         this.props.history.push('/');
        //     } else if (this.store.globalErrMsg) {
        //         Modal.error({ title: '信息提示', content: this.store.globalErrMsg, okText: '确认' });
        //         this.store.refreshCaptcha();
        //     }
        // }, 1);
        return false;

    };

    render() {
        const inputStyle = {
            width: '368px',
            height: '40px'
        };
        const formItemLayout = {
            colon: false,
            labelCol: {
                span: 4,
                offset: 4,
            },
            wrapperCol: {
                span: 12
            }
        };
        const btnLayout = {
            wrapperCol: {
                span: 4,
                offset: 8
            }
        };
        return (

            <div className={styles.content}>
                <div className={styles.left}>
                    <div className={styles.name}>慧招商云平台</div>
                    <div className={styles.desc}>关于</div>
                </div>
                <div className={styles.right}>
                    <Form autoComplete="off" style={{ width: '368px',marginLeft:'38px' }}>
                        <FormItem
                        >
                            <div className={styles.desc_title}>登录</div>
                        </FormItem>
                        <FormItem
                            validateStatus={this.store.errMsg.username ? 'error' : ''}
                            help={this.store.errMsg.username || ''}
                        >
                            <Input
                                ysSize="D"
                                maxLength={11}
                                placeholder="请输入手机号码"
                                prefix={<i className={`${styles.icon} ${styles.iconUser}`}></i>}
                                onChange={this.onUsernameChange}
                                style={inputStyle}
                                autoComplete="on"
                            />
                        </FormItem>
                        <FormItem
                            validateStatus={this.store.errMsg.password ? 'error' : ''}
                            help={this.store.errMsg.password || ''}
                        >
                            <Input
                                type="password"
                                ysSize="D"
                                maxLength={20}
                                placeholder="请输入6~20位密码"
                                prefix={<i className={`${styles.icon} ${styles.iconPwd}`}></i>}
                                onChange={this.onPasswordChange}
                                style={inputStyle}
                            />
                        </FormItem>
                        <FormItem
                        >
                            <Checkbox onChange={this.onCheckboxChange} value="1">
                                <span style={{ fontSize: '12px', color: '#a1b1be', marginLeft: '-2px' }}>记住密码</span>
                            </Checkbox>
                        </FormItem>
                        <FormItem>
                            <div>
                                <Button
                                    type="A"
                                    htmlType="submit"
                                    onClick={this.onSubmit}
                                    style={{ width: '100%' }}
                                >登录</Button>
                            </div>
                            <span>
                                <Link to="/join">忘记密码</Link>
                            </span>
                            <span style={{ float: 'right' }}>
                                <Link to="/join">免费注册</Link>
                            </span>
                        </FormItem>
                    </Form>
                </div>
            </div>
        );
    }
}
